<template>
<highlightjs language="JavaScript" highlightAuto top :code="code" />
</template>
<script>
export default {
  setup () {
    const code = `
    import 'ol/ol.css'
    import { Map, Overlay, View } from 'ol'
    import { Style, Fill, Stroke, Text } from 'ol/style'
    import LayerVector from 'ol/layer/Vector'
    import SourceVector from 'ol/source/Vector'
    import QH from '@/geo/QH.json'
    import GeoJSON from 'ol/format/GeoJSON'

    const state = reactive({
      map: null,
      mapBox: ref(null),
      popup: ref(null),
      overlay: null,
      shopPopup: false,
      highlightStyle: new Style({
        stroke: new Stroke({
          color: '#f00',
          width: 1
        }),
        fill: new Fill({
          color: 'rgba(255, 0, 0, 0.1)'
        }),
        text: new Text({
          font: '12px Calibri, sans-serif',
          fill: new Fill({
            color: '#000'
          }),
          stroke: new Stroke({
            color: '#f00',
            width: 3
          })
        })
      }),
      highlight: null,
      featureOverlay: null,
      data: {}
    })

    const init = () => {
      const displayFeatureInfo = (pixel, evt) => {
        if (!state.featureOverlay) {
          state.featureOverlay = new LayerVector({
            source: new SourceVector(),
            map: state.map,
            style: feature => {
              state.highlightStyle.getText().setText(feature.get('name'))
              return state.highlightStyle
            }
          })
        }

        const feature = state.map.forEachFeatureAtPixel(pixel, feature => feature)

        if (feature !== state.highlight) {
          if (state.highlight) {
            state.shopPopup = false
            state.data = {}
            state.featureOverlay.getSource().removeFeature(state.highlight)
          }
          if (feature) {
            // 鼠标放到图层时改变鼠标样式
            state.map.getTargetElement().style.cursor = state.map.hasFeatureAtPixel(evt.pixel) ? 'pointer' : ''
            state.data = feature.values_
            state.featureOverlay.getSource().addFeature(feature)
            state.shopPopup = true
            state.overlay.setPosition(evt.coordinate)
          }
          state.highlight = feature
        }
      }

      const style = new Style({
        fill: new Fill({
          color: 'rgba(255, 255, 255, 0.6)'
        }),
        stroke: new Stroke({
          color: '#319FD3',
          width: 1
        }),
        text: new Text({
          font: '12px Calibri,sans-serif',
          fill: new Fill({
            color: '#000'
          }),
          stroke: new Stroke({
            color: '#fff',
            width: 3
          })
        })
      })

      state.overlay = new Overlay({
        element: state.popup, // 弹窗标签，在html里
        stopEvent: false,
        positioning: 'top-right',
        offset: [40, 40]
      })

      const vectorLayer = new LayerVector({
        source: new SourceVector({
          features: new GeoJSON().readFeatures(QH, {
            dataProjection: 'EPSG:4326',
            featureProjection: 'EPSG:4326'
          })
        }),
        style: feature => {
          style.getText().setText(feature.get('name'))
          return style
        }
      })

      state.map = new Map({
        target: state.mapBox,
        layers: [vectorLayer],
        overlays: [state.overlay],
        view: new View({
          projection: 'EPSG:4326',
          center: [98.860775, 35.521945],
          zoom: 6
        })
      })

      state.map.on('pointermove', evt => {
        if (evt.dragging) {
          return
        }
        const pixel = state.map.getEventPixel(evt.originalEvent)
        displayFeatureInfo(pixel, evt)
      })

      // state.map.on('click', evt => {
      //   displayFeatureInfo(evt.pixel, evt)
      // })
    }
    `
    return {
      code
    }
  }
}
</script>
